<template>
    <div class="tab">
        <span 
          v-for="(item,index) in tabArr" 
          :key="index"
          :class="tabIndex===index?'style1':''"
          @click="showList(index)"
        >{{item}}</span>
    </div>
</template>

<script>
export default {
  data() {
      return {
        tabIndex: 0,
        tabArr: ["全部","已完成","未完成"]
      }
  },
  methods: {
    showList (index) {
        this.tabIndex = index
    }
  },
}
</script>

<style>
span{
  margin: 10px;  
  cursor: pointer;
}
.style1{
  color:red;
}
</style>
